<template>
  <div class="border-r" id="timelineid">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">预警过程</div>
    </div>
    <div class="timeLine-center" v-if="isShowTimeLine">
      <div class="timeLine-sjx">
        <el-timeline>
          <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.flowTime"
            :color="activity.color">
            <div class="content">
              {{ activity.flowName }}
              <!-- <i class="el-icon-d-arrow-right" style="color: #0649D7; transform: rotate(90deg);"></i> -->
              <el-collapse v-model="activeName">
                <el-collapse-item :name="index + 1">
                  <template slot="title">
                    <i :class="judgeActive(index + 1) !== -1 ? 'downArrow1' : 'downArrow2'"> </i>
                  </template>
                  <div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>
<script>
import { listPage } from "@/api/EarlyWarningManagement/yjtzd";
import { getLeftFlowApi } from "@/api/EarlyWarningManagement/yjrb";

export default {
  name: "TimeLine",
  props: ["infoId", "timeLineInfoId"],
  data() {
    return {
      activities: [],
      isShowTimeLine: false,
      activeName: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

    };
  },
  mounted() {
    // const dom = document.querySelector("#timelineid");
    // dom.style.height = `${dom.offsetHeight}px`;
    this.$nextTick(() => {
      this.isShowTimeLine = true;
    });
  },
  watch: {
    "timeLineInfoId"(val) {
      this.getWarningLeftFlow(val);
    },
    /* value(newVal) {
      getLeftFlowApi({ infoId: newVal }).then(res => {
        this.activities = res
      })
      console.log("时间轴", this.value)
    } */
    infoId: {
      handler(val) {
        if (val) {
          this.getWarningLeftFlow(val);
        }
      },
      immediate: true
    }
  },
  methods: {
    judgeActive(data) {
      return this.activeName.indexOf(data);
    },
    AddFh() {
      this.$router.go(-1);
    },
    // 获取预警通知单id
    getNoticeList() {
      listPage({}).then(res => {
        const infoIds = res.data[0].infoId;
        this.getWarningLeftFlow(infoIds);
        console.log("hh", res.data[0]);
      });
    },
    // 通过预警通知单id获取流程轴
    async getWarningLeftFlow(infoId) {
      try {
        const res = await getLeftFlowApi({ infoId });
        this.activities = res;
      } catch (error) {
        console.log(error);
      }
      console.log(this.getInfoId);
    }
    // getWarningLeftFlow() {
    //   getLeftFlowApi({ infoId: this.value }).then(res => {
    //     this.activities = res
    //   })
    //   console.log("时轴", this.value)
    // }
  }
};
</script>

<style scoped lang="less">
.border-r {
  border: 1px #0649d7 solid;
  border-radius: 5px;
  height: 100%;
}

.cardTitleNew {
  background-color: rgba(38, 92, 255, 0.45);
  color: #fff;
  align-items: center;
}

.cardTitleNew a {
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
}

:deep(.el-collapse-item__header) {
  align-items: center;
  height: 23px;
  line-height: 23px;
  background-color: transparent;
  border: none;
  color: #fff;
  border-bottom: none;
}

:deep(.el-collapse-item__wrap) {
  border: none;
  border-bottom: none;
  background-color: transparent;
}

:deep(.el-collapse) {
  border-top: transparent;
  border-bottom: transparent;
}

:deep(.el-collapse-item__content) {
  padding-bottom: 0px !important;
}

:deep(.el-collapse-item__arrow) {
  display: none;
}

.homePageCard.height-100 {
  height: 100%;
  width: 100%;
  // right: 12px;
  // z-index: 99;
  display: flex;
  flex-direction: column;
}

:deep(.el-timeline) {
  height: 100%;

  .el-timeline-item__tail {
    border-left: 2px solid #007fcf;
  }

  .el-timeline-item {
    padding-bottom: 40px;
  }

  .el-timeline-item__node {
    background-color: #007fcf;
  }

  .el-timeline-item__content {
    color: #fff;
  }

  .el-timeline-item__timestamp {
    color: #fff;
    font-weight: 600;
  }
}

.downArrow1 {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url("../../../assets/img/downArrow1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.downArrow2 {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../../../assets/img/downArrow1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: rotate(-90deg);
}

.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
  font-weight: 600;
}

.timeLine-center {
  flex: 1;
  height: calc(100% - 40px);
  overflow-y: auto;
}

.timeLine-sjx {
  height: 100%;
  padding: 20px;
}

.timeLine-center .el-timeline-item__node--01 {
  width: 18px !important;
  height: 18px !important;
  left: 117px !important;
}

div::-webkit-scrollbar-track {
  border-radius: 0;
  background: transparent;
}
</style>
